<template>
  <view class="settings-page">

    
    <!-- 个人信息卡片 -->
    <view class="card-section">
      <view class="card-title">个人信息</view>
      <view class="card-content">
        <view class="setting-item" >
          <text class="item-label">头像</text>
          <view class="item-value" @click="chooseImage">
            <image class="avatar" :src="userInfo.avatar || defaultAvatar"></image>
          </view>
        </view>
        <view class="setting-item" >
          <text class="item-label">昵称</text>
		  <view style="display: flex; align-items: center;">
			  <input class="arrow" style="text-align: right;" v-model="userInfo.user_name" placeholder="未设置"/>
			  <u-icon name="arrow-right" color="#999" size="32"></u-icon>
		  </view>
        </view>
        <view class="setting-item" @click="cityClick">
          <text class="item-label">城市</text>
          <view style="display: flex;align-items: center;">
			  <text class="arrow">
			  {{ userInfo.city_name  }}
			  </text>
			  <u-icon name="arrow-right" color="#999" size="32"></u-icon>
		  </view>
        </view>
      </view>
    </view>
    
    <!-- 安全设置卡片 -->
    <view class="card-section">
      <view class="card-title">安全设置</view>
      <view class="card-content">
        <view class="setting-item" @click="changePassword">
          <text class="item-label">修改密码</text>
          <text class="arrow">联系管理员修改</text>
        </view>
        <view class="setting-item" @click="bindMobile">
          <text class="item-label">绑定手机</text>
          <!-- <text class="item-value">{{ userInfo.mobile || '未绑定' }}</text> -->
          <!-- <text class="arrow">{{ userInfo.phonenumber || '未绑定' }}</text> -->
		  <view style="display: flex;align-items: center;">
			  <input style="text-align: right;" class="arrow" v-model="userInfo.phonenumber" placeholder="未绑定"/>
			  <u-icon name="arrow-right" color="#999" size="32"></u-icon>
		  </view>
        </view>
    
      </view>
    </view>
    
  
   <view style="width: 92%;margin:  auto;">
		<view class="btn-container">
		  <button 
			class="submit-btn" 
			@click="submitForm"
		  >
			保存修改
		  </button>
		</view>
   </view>
    <!-- 底部提示 -->
    <view class="footer-tip">
      <text>业务宝 © {{dates}}</text>
    </view>
	
	<u-action-sheet @close="show=false"  @select="selectClick"  :actions="list" :title="title" :show="show"></u-action-sheet>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultAvatar: 'https://cdn-icons-png.flaticon.com/512/149/149071.png',
      userInfo: {},
      notificationSettings: {
        message: true,
        order: true,
        system: true
      },
	  show:false,
	  list:[],
	  title:'选择绑定城市',
	  dates:new Date().getFullYear()
    }
  },
  onLoad() {
  	this.getprofile()
	this.getCity()
  },
  methods: {
	cityClick(){
		this.show = true
		// this.userInfo.city_name == '' ? this.show = true : this.show = false
	},
	selectClick(index) {
		console.log(index)
		this.userInfo.city_id = index.city_id
		this.userInfo.city_name = index.name
		this.show = false
	},
	async getCity(){
		const params = {
			page:1,
			limit:20,
		}
		const res = await this.$api.get('/City/index',params,true)
		if(res.data.code === 200) {
			res.data.data.forEach(item => {
				this.list.push({name:item.city_name,city_id:item.city_id})
			})
		}
		
	},
	async getprofile(){
		const res = await this.$api.get('/user/profile','',true)
		if(res.data.code === 200) {
			this.userInfo = res.data.data
		}
	},
	async submitForm() {
		const  params = {
			avatar:this.userInfo.avatar,
			user_name:this.userInfo.user_name,
			city_id:this.userInfo.city_id,
			city_name:this.userInfo.city_name,
			phonenumber:this.userInfo.phonenumber
		}
		const res = await this.$api.post('/user/edit',params,true)
		if(res.data.code === 200) {
			uni.showToast({
				icon:'success',
				title:res.data.msg
			})
			this.getprofile()
		}
	},
	chooseImage(type) {
		uni.chooseImage({
		  count: 1,
		  sizeType: ['compressed'],
		  sourceType: ['album', 'camera'],
		  success: async (res) => {
	
		  const response = await this.$api.uploadFile('/Upload/File',res.tempFilePaths[0])
		  if(response.code == 200) {
			this.userInfo.avatar = response.url
		  }
		  }
		});
	},
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 跳转到编辑资料页
    goToEditProfile() {
      uni.navigateTo({
        url: '/pages/profile/editProfile'
      });
    },
    
    // 修改密码
    changePassword() {
	  
      uni.showToast({
      	icon:'none',
		title:'请联系管理员修改'
      })
    },
    
    // 绑定手机
    bindMobile() {
      uni.navigateTo({
        url: '/pages/settings/bindMobile'
      });
    },
    
    // 绑定邮箱
    bindEmail() {
      uni.navigateTo({
        url: '/pages/settings/bindEmail'
      });
    },
    
    // 绑定微信
    bindWechat() {
      if (this.userInfo.wechat) {
        // 已绑定，显示解绑确认
        uni.showModal({
          title: '解绑微信',
          content: '确定要解除与微信的绑定吗？',
          success: (res) => {
            if (res.confirm) {
              // 调用解绑接口
              this.userInfo.wechat = false;
              uni.showToast({
                title: '已解绑微信',
                icon: 'success'
              });
            }
          }
        });
      } else {
        // 未绑定，跳转到绑定页面
        uni.navigateTo({
          url: '/pages/settings/bindWechat'
        });
      }
    },
    
    // 绑定支付宝
    bindAlipay() {
      if (this.userInfo.alipay) {
        // 已绑定，显示解绑确认
        uni.showModal({
          title: '解绑支付宝',
          content: '确定要解除与支付宝的绑定吗？',
          success: (res) => {
            if (res.confirm) {
              // 调用解绑接口
              this.userInfo.alipay = false;
              uni.showToast({
                title: '已解绑支付宝',
                icon: 'success'
              });
            }
          }
        });
      } else {
        // 未绑定，跳转到绑定页面
        uni.navigateTo({
          url: '/pages/settings/bindAlipay'
        });
      }
    },
    
    // 切换通知设置
    toggleNotification(type) {
      this.notificationSettings[type] = !this.notificationSettings[type];
      // 实际项目中需调用接口保存设置
      console.log(`通知设置[${type}]:`, this.notificationSettings[type]);
    },
    
    // 关于我们
    aboutUs() {
      uni.navigateTo({
        url: '/pages/settings/aboutUs'
      });
    },
    
    // 隐私政策
    privacyPolicy() {
      uni.navigateTo({
        url: '/pages/settings/privacyPolicy'
      });
    },
    
    // 用户协议
    termsOfService() {
      uni.navigateTo({
        url: '/pages/settings/termsOfService'
      });
    },
    
    // 清除缓存
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除本地缓存数据吗？',
        success: (res) => {
          if (res.confirm) {
            // 模拟清除缓存
            setTimeout(() => {
              this.cacheSize = '0KB';
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
            }, 500);
          }
        }
      });
    }
  }
}
</script>

<style scoped>
	
/* 提交按钮 */
.btn-container {
  padding: 32rpx 0;
}
.submit-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(90deg, #2c82c9, #3a9ee6);
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 48rpx;
  box-shadow: 0 6rpx 16rpx rgba(44, 130, 201, 0.3);
}
.submit-btn:disabled {
  background: #e5e5e5;
  color: #999;
  box-shadow: none;
}
/* 页面基础样式 */
.settings-page {
  background-color: #f5f7fa;
  min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: linear-gradient(90deg, #2c82c9, #3a9ee6);
  color: #fff;
}
.back-btn {
  font-size: 32rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}

/* 卡片区域 */
.card-section {
  background-color: #fff;
  margin: 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  overflow: hidden;
}
.card-title {
  padding: 24rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}
.card-content {
  padding: 0 24rpx;
}

/* 设置项 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.setting-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 28rpx;
  color: #333;
}
.item-value {
  font-size: 26rpx;
  color: #666;
  display: flex;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: 2rpx solid #bdbdbd;
}
.arrow {
  color: #999;
  margin-left: 16rpx;
}

/* 开关样式 */
switch {
  transform: scale(0.8);
}

/* 清除缓存 */
.clear-cache {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  margin: 24rpx;
  padding: 28rpx 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  font-size: 28rpx;
  color: #333;
}
.cache-size {
  color: #999;
}

/* 底部提示 */
.footer-tip {
  text-align: center;
  padding: 40rpx 0;
  font-size: 24rpx;
  color: #999;
}
</style>